<template>
<div class="address flex-column">

    <div class="form-box flex-1">
        <van-form size="mini" :show-error-message="false" label-width="3rem" ref="vanForm">
            <van-field
                v-model="form.name"
                name="收货人姓名"
                label="收货人姓名："
                placeholder="请输入收货人姓名"
                :rules="[{ required: true, message: '请填写收货人姓名' }]"
            />
            <van-field
                v-model="form.email"
                name="收货人邮箱"
                label="收货人邮箱："
                placeholder="请输入收货人邮箱"
                :rules="[{ required: true, message: '请填写收货人邮箱' }]"
            />

            <van-field
                v-model="form.phone"
                name="用户名"
                label="收货人电话："
                placeholder="请输入收货人电话"
                :rules="[{ required: true, message: '请填写收货人电话' }]"
            />
            <van-field
                readonly
                @click="show = true"
                v-model="form.addr"
                name="收货人地址"
                label="收货人地址："
                placeholder="请输入收货人地址"
                :rules="[{ required: true, message: '请填写收货人地址' }]"
            />
            <van-field
                v-model="form.addr_extra"
                name="详细地址"
                label="详细地址："
                placeholder="请输入详细地址"
                :rules="[{ required: true, message: '请填写详细地址' }]"
            />
            <van-field name="switch" label="是否设为默认" >
                <template #input>
                    <van-switch v-model="form.is_default" size="20" :inactive-value="0" :active-value="1" active-color="#ee0a24" />
                </template>
            </van-field>
        </van-form>
    </div>

    <div class="footer flex-center height-58">
        <van-button type="danger" round size="small" @click="submit" :loading="loading"> 保存收货地址 </van-button>
    </div>

    
    <City :show.sync="show" @addressConfirm="addressConfirm" />
</div>
</template>

<script>
import City from '@/components/city'
export default {
    components: { City },
    data () {
        return {
            show: false,
            loading: false,
            form: {
                name: '',
                email: '',
                phone: '',
                addr: '',
                addr_extra: '',
                is_default: ''
            }
        }
    },
    methods: {
        submit () {
            this.$refs.vanForm.validate()
            .then (() => {
                this.loading = true
                this.$user.addAddress(this.form).then(res => {
                    this.loading = false
                    this.$toast.success(this.form.id ? '修改成功' : '新增成功')
                    this.$router.back()
                }).catch(() => {
                    this.loading = false
                })
            })
            .catch (err => {
                err[0].message && this.$toast(err[0].message)
            })
        },
        addressConfirm (val, old) {
            // console.log(val, old)
            this.form.addr = val.map(v => v.name).join(' ')
            this.show = false
        }
    },
    created () {
        if (this.$route.query.id) {
            this.$user.getAddressDetail(this.$route.query.id).then(res => {
                this.form = res.data.detail
                this.$toast.clear()
            })
        }
    }
}
</script>

<style lang="less" scoped>

</style>
